<template>
    <button :class="classes" :style="buttonStyle" v-bind="localAttr">
        <slot />
    </button>
</template>
<script setup>
const props = defineProps({
    // 类型
    type: {
        type: String,
        default: 'primary',
    },
    // 是否为朴素按钮
    plain: {
        type: Boolean,
        default: false,
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    // 是否加粗
    bold: {
        type: Boolean,
        default: false,
    },
    // 样式
    style: {
        type: [Object, String],
        default: null,
    },
    // 上方距离
    top: {
        type: [Number, String],
        default: 0,
    },
});

const { type, plain, disabled, bold, style, top } = toRefs(props);

const classes = computed(() => {
    const output = ['z-button'];
    if (disabled.value === false) {
        const typeClass = plain.value === false ? `z-button-${type.value}` : `z-button-${type.value}-plain`;
        output.push(typeClass);
    }
    if (bold.value === true) {
        output.push('z-button-bold');
    }
    return output;
});

const buttonStyle = computed(() => {
    return {
        marginTop: `${top.value}px`,
        ...style.value,
    };
});

const localAttr = computed(() => {
    return {
        disabled: disabled.value,
    };
});
</script>
<style lang="scss">
.z-button {
    padding: 12px 0;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 18px;
    border-radius: 20px;
    cursor: pointer;

    &-primary {
        background: linear-gradient(0deg, #CCA67A, #FFF4D9);
        color: var(--btn-primary-color);
    }

    &-primary-plain {
        background-color: var(--btn-primary-plain-bg);
        color: var(--btn-primary-plain-color);
        border: var(--btn-primary-plain-border);
    }

    &-bold {
        font-weight: bold;
    }

    &[disabled] {
        background-color: var(--btn-primary-disabled-bg);
        color: var(--btn-primary-disabled-color);
    }
}
</style>